<template>
  <div class="medical">

    <div class="form-bar">
      <el-form :inline="true">
        <el-form-item>
          <tool-bar :add-batch-data="addBatchData"></tool-bar>
        </el-form-item>
        <el-form-item label="做账期号">
          <el-date-picker
              v-model="form.archivesDate"
              type="month" size="small"
              placeholder="选择月" clearable @change="getDataList"
              :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.name" size="small" clearable @blur="getDataList"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="form.cid" size="small" clearable @blur="getDataList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList" size="small" type="primary">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table
          :data="tableData" border
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
        <el-table-column label="姓名"
                         prop="name"></el-table-column>
        <el-table-column label="工号" prop="jobNo"></el-table-column>
        <el-table-column label="证件号码"
                         prop="cid" min-width="180"></el-table-column>
        <el-table-column label="部门"
                         prop="dept"></el-table-column>
        <el-table-column label="缴费类型"
                         prop="paymentType" min-width="120"></el-table-column>
        <el-table-column label="缴费标识"
                         prop="paymentSign" min-width="120"></el-table-column>
        <el-table-column label="费款所属期起"
                         prop="" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.archivesDateStart|formatDateBirth }}
          </template>
        </el-table-column>
        <el-table-column label="费款所属期止"
                         prop="" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.archivesDateEnd|formatDateBirth }}
          </template>
        </el-table-column>
                <el-table-column label="做账期号"
                         prop="" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.archivesDate|formatDateBirth }}
          </template>
        </el-table-column>

        <el-table-column label="单位缴纳合计"
                         prop="totalUnitPayment"  min-width="120"></el-table-column>
        <el-table-column label="个人缴纳合计"
                         prop="totalPersonalPayment" min-width="120"></el-table-column>
        <el-table-column label="滞纳金合计"
                         prop="totalLateFee" min-width="100"></el-table-column>
        <el-table-column label="利息合计"
                         prop="totalInterest"></el-table-column>
        <el-table-column label="总合计"
                         prop="total"></el-table-column>
        <el-table-column label="基本医疗人员缴费基数"
                         prop="paymentBaseForBasicMedicalPersonnel" min-width="180"></el-table-column>
        <el-table-column label="基本医疗人员工资"
                         prop="salaryOfBasicMedicalPersonnel" min-width="150"></el-table-column>
        <el-table-column label="基本医疗单位缴费比例"
                         prop="paymentRatioOfBasicMedicalUnits" min-width="180"></el-table-column>
        <el-table-column label="基本医疗单位缴费金额"
                         prop="paymentAmountOfBasicMedicalUnits" min-width="180"></el-table-column>
        <el-table-column label="基本医疗个人缴费比例"
                         prop="paymentRatioOfBasicMedicalPersonal" min-width="180"></el-table-column>
        <el-table-column label="基本医疗个人缴费金额"
                         prop="paymentAmountOfBasicMedicalPersonal" min-width="180"></el-table-column>
        <el-table-column label="基本医疗利息"
                         prop="basicMedicalInterest" min-width="140"></el-table-column>
        <el-table-column label="基本医疗滞纳金"
                         prop="basicMedicalLateFee" min-width="150"></el-table-column>
        <el-table-column label="大额医疗人员缴费基数"
                         prop="paymentBaseForLargePersonnel" min-width="180"></el-table-column>
        <el-table-column label="大额医疗人员工资"
                         prop="salaryLargePersonnel" min-width="180"></el-table-column>
        <el-table-column label="大额医疗单位缴费比例"
                         prop="paymentRatioOfLargeAmountUnits" min-width="180"></el-table-column>
        <el-table-column label="大额医疗单位缴费金额"
                         prop="paymentAmountOfLargeAmountUnits" min-width="180"></el-table-column>
        <el-table-column label="大额医疗个人缴费比例"
                         prop="paymentRatioOfLargeAmountPersonal" min-width="180"></el-table-column>
        <el-table-column label="大额医疗个人缴费金额"
                         prop="paymentAmountOfLargeAmountPersonal" min-width="180"></el-table-column>
        <el-table-column label="大额利息"
                         prop="largeAmountInterest" min-width="120"></el-table-column>
        <el-table-column label="大额滞纳金"
                         prop="largeAmountLateFee" min-width="100"></el-table-column>

      </el-table>
    </div>
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[12,total]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
    <el-dialog
        top="15vh"
        :visible.sync="dialogVisibleUpload"
        width="50%"
        title="医保原始数据批量导入"
        :before-close="handleClose"
        center>
      <el-upload
          class="upload-demo"
          drag
          :http-request="uploadArchives"
          auto-upload
          accept=".xlsx,.xls"
          multiple action="#" style="text-align: center!important;">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传1个.xls/.xlsx文件</div>

        <!--        <el-link type="success" href="https://47.109.16.23:28361/down/GURX6ipYziXs.xlsx" style="margin-top: 1rem">点击下载社保上传模板</el-link>-->
      </el-upload>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" append-to-body center>
      <div slot="title">
        <h3>提示</h3>
        <h5>上传文件中：
          <el-tag type="info" v-text="allNum"></el-tag>
          条数据，成功导入
          <el-tag type="success" v-text="successNum"></el-tag>
          条数据，失败导入：
          <el-tag type="danger" v-text="errorNum"></el-tag>
          条数据<span v-if="errorNum>0">，错误信息如下：</span></h5>
      </div>
      <el-row>
        <ol v-if="list.length>0" style="text-align: center;height:35vh;overflow-y: scroll;">
          <li v-for="(item,index) in list" style="text-align: left;">
            <span v-text="item" style="width: 350px;overflow: hidden;text-overflow: ellipsis"></span></li>
        </ol>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";

export default {
  name: "SysMedicalInsurance",
  components: {ToolBar},
  data() {
    return {
      dialogVisible: false,
      list: [],
      allNum: 0,
      successNum: 0,
      errorNum: 0,
      currentPage: 1,
      total: 0,
      size: 12,
      tableData: [],
      dialogVisibleUpload: false,
      form: {
        archivesDate:new Date()
      }
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    handleClose(done) {
      console.log("Donw:", done)
      this.$confirm('确认关闭？')
          .then(_ => {
            this.form = {}
            this.dialogFormVisible = false
            done();
          })
          .catch(_ => {
          });
    },
    getDataList() {
      this.dialogFormVisible = false
      console.log("查询数据：", this.form)
      axios.post("/medical_insurance/list/page/" + this.currentPage + "/" + this.size, this.form).then(res => {
        console.log("打卡信息：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        } else {
          this.tableData = []
          this.total = 0
          this.pages = 1
        }

      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    addBatchData() {
      console.log("批量添加")
      this.dialogVisibleUpload = true
    },
    uploadArchives(res) {
      console.log(res)
      let formData = new FormData();
      formData.append("file", res.file)
      axios({
        method: "POST",
        url: "/medical_insurance/addBatch/" + this.$store.state.userInfo.id,
        headers: {
          'content-type': 'multipart/form-data',
        },
        data: formData
      }).then(res => {
        console.log(res)
        if (res.data.success) {
          let successNum = parseInt(res.data.data.successNum);
          let errorNum = parseInt(res.data.data.errorNum);
          let allNum = successNum + errorNum
          if (errorNum > 0) {
            let list = res.data.data.list
            this.successNum = successNum;
            this.errorNum = errorNum
            this.allNum = allNum;
            this.list = list
            this.dialogVisible = true
          } else {
            this.dialogVisibleUpload = false
            this.getDataList()
            this.$message({
              dangerouslyUseHTMLString: true,
              message: "成功上传<b>" + allNum + "</b>条数据",
              type: "success"
            })
          }
        } else {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: res.data.message,
            type: "error"
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
